<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="content">
	
		<h1 class="title ui-widget-header ui-corner-all">Focus</h1>
			<div class="entry">
			<p>Focus manages element focus in forms. By default first visible and enabled input element(e.g. text, textarea, select) is chosen to receive focus automatically.
			It is also possible to explicitly declare the component to receive focus via the for attribute.</p>
			
			<p>Focus is also aware of failed validations, first invalid input component receives a focus automatically.</p>
				
			<h:form id="form">
			
				<p:panel id="panel" header="Register">
				
					<p:focus context="panel"/>
					
					<p:messages />
					
					<h:panelGrid columns="3">
						<h:outputLabel for="firstname" value="Firstname: *" />
						<p:inputText id="firstname" value="#{personBean.firstname}" required="true" label="Firstname">
							<f:validateLength minimum="2" />
						</p:inputText>
						<p:message for="firstname" />
						
						<h:outputLabel for="surname" value="Surname: *" />
						<p:inputText id="surname" value="#{personBean.surname}" required="true" label="Surname"/>
						<p:message for="surname" />
					</h:panelGrid>
					
					<p:commandButton id="submitButton" value="Submit" update="panel" actionListener="#{personBean.savePerson}" />
				</p:panel>

			</h:form>
						
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="focus.xhtml">
					<pre name="code" class="xml">
&lt;h:form&gt;
			
	&lt;p:panel id="panel" header="Register"&gt;
	
		&lt;p:focus context="panel"/&gt;
		
		&lt;p:messages /&gt;
		
		&lt;h:panelGrid columns="3"&gt;
			&lt;h:outputLabel for="firstname" value="Firstname: *" /&gt;
			&lt;p:inputText id="firstname" required="true" label="Firstname"
					value="\#{personBean.firstname}" &gt;
				&lt;f:validateLength minimum="2" /&gt;
			&lt;/p:inputText&gt;
			&lt;p:message for="firstname" /&gt;
			
			&lt;h:outputLabel for="surname" value="Surname: *" /&gt;
			&lt;p:inputText id="surname" required="true" label="Surname"
					value="\#{personBean.surname}" /&gt;
			&lt;p:message for="surname" /&gt;
		&lt;/h:panelGrid&gt;
		
		&lt;p:commandButton value="Submit" update="panel" 
					actionListener="\#{personBean.savePerson}" /&gt;
	&lt;/p:panel&gt;

&lt;/h:form&gt;
					</pre>
				</p:tab>
				
				<p:tab title="PersonBean.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

public class PersonBean {

	private String firstname;
	
	private String surname;

	public String getFirstname() {
		return firstname;
	}
	public void setFirstname(String firstname) {
		this.firstname = firstname;
	}

	public String getSurname() {
		return surname;
	}
	public void setSurname(String surname) {
		this.surname = surname;
	}
	
	public void savePerson(ActionEvent actionEvent) {
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Welcome " + firstname + " " + surname + "!"));
	}
}

					</pre>
				</p:tab>
			</p:tabView>
					
		</div>
				
	</ui:define>
</ui:composition>